<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>公司差旅系统</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/myStyle.css">
</head>
<body>
	<div class="nav-backstage navbar navbar-fixed-top">
		<div class="container-fluid">
			<div class="nav-logo">
				<a href="#">公司差旅系统</a>
			</div>
			<div class="nav-staff">
				<div class="icon-bell">
					<a href="#"><span class="glyphicon glyphicon-bell" aria-hidden="true"></span><span class="badge" id="MessageNum">42</span></a>
				</div>
				<div class="dropdown" style="float: left;">
					<button class="btn dropdown-toggle nav-dropdownmenu" type="button" id="NavDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><img src="img/staffPic.jpeg" alt="staffPic" width="35px" height="35px">
						<span>Tadokoro Megumi </span>
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu" aria-labelledby="NavDropdownMenu">
						<li><a href="#">个人信息</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#">登出</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
	<div class="sidenav">
		<div>
			<span class="glyphicon glyphicon-tasks" style="padding-top: 5px;margin-right: 10px;"></span> 
			<span>管理</span>	
		</div>
		<ul>
			<li>
				<a href="#" id="aMenu1"><span class="glyphicon glyphicon-th-large" aria-hidden="true"> 出差申请表</span><span class="glyphicon glyphicon-menu-left" aria-hidden="true" style="font-size: 12px;display: block;margin: 12px 20px 0 0;float: right;" id="sub1"></span></a>
				<ul id="menu1">
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新建申请表</a></li>
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;待审核申请表</a></li>
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已通过申请表</a></li>
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;未通过申请表</a></li>
				</ul>
			</li>
			<li>
				<a href="#" id="aMenu2"><span class="glyphicon glyphicon-th" aria-hidden="true"> 报销申请表</span> <span class="glyphicon glyphicon-menu-left" aria-hidden="true" style="font-size: 12px;display: block;margin: 12px 20px 0 0;float: right;" id="sub2"></span></a>
				<ul id="menu2">
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新建申请表</a></li>
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;待审核申请表</a></li>
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已通过申请表</a></li>
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;未通过申请表</a></li>
				</ul>
			</li>
			<li>
				<a href="#"><span class="glyphicon glyphicon-th-list" aria-hidden="true"> 个人出差报表</a>
			</li>
		</ul>
		<div id="copy">
			&copy; Travel Business System by CQU
		</div>
	</div>

	<div class="content">
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<h1>管理向导</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<ol class="breadcrumb">
						<li><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"> 管理向导</a></li>
					</ol>
				</div>
			</div>
			<div class="row">
				<div class="col-md-3">
					<div class="travel1">
						<a href="#">
							<div class="desone">
								<span class="glyphicon glyphicon-list-alt" aria-hidden="true">
							</div>
							<div class="destwo">
								<p>出差申请表填写</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-3">
					<div class="travel2">
						<a href="#">
							<div class="desone">
								<span class="glyphicon glyphicon-list-alt" aria-hidden="true">
							</div>
							<div class="destwo">
								<p>报销申请表填写</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-3">
					<div class="travel3">
						<a href="#">
							<div class="desone">
								<span class="glyphicon glyphicon-list-alt" aria-hidden="true">
							</div>
							<div class="destwo">
								<p>查看订票情况</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-3">
					<div class="travel4">
						<a href="#">
							<div class="desone">
								<span class="glyphicon glyphicon-list-alt" aria-hidden="true">
							</div>
							<div class="destwo">
								<p>查看个人统计报表</p>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>

		<div class="container-fluid">
			<div class="row" style="margin-top: 10px;">
				<div class="col-md-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">出差申请表填写说明</h3>
						</div>
						<div class="panel-body panelheight">
							<p>1.出差申请表分为三类：员工自定义，系统自动化，半自动化</p>
							<p>2.员工自定义：由员工自己决定前往目的地的交通工具和住宿地点</p>
							<p>3.系统自动化：当员工填写完出差申请表的基本信息后，由系统决定乘坐的交通工具和住宿地点</p>
							<p>4.半自动化：系统根据员工填写的信息，生成行程的推荐候补，可供员工自行选择</p>
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">报销申请表填写说明</h3>
						</div>
						<div class="panel-body panelheight">
							<p>1.报销申请表只有一类：员工上传报销凭据，并由部门经理和总经理审核通过后，方可报销</p>
							<p>2.报销凭据不通过此系统提交，由员工自行递交给部门经理或总经理，此系统只用于确认已提交凭据</p>
							<p>3.交通报销金额按照实际情况报销，其他报销金额按公司标准报销，特殊情况请备注</p>
						</div>
					</div>
				</div>
			</div>
			<div class="row" style="margin-top: 10px;">
				<div class="col-md-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">订票情况查看说明</h3>
						</div>
						<div class="panel-body panelheight">
							<p>1.员工自定义行程：由员工自行决定交通工具和住宿地点，故无法在系统中查看订票情况</p>
							<p>2.系统自动化和半自动化：这部分交通工具和住宿地点由系统决定，可在系统中查看交通工具的订票情况和宾馆状况</p>
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">个人统计报表查看说明</h3>
						</div>
						<div class="panel-body panelheight">
							<p>1.统计报表分为四类：出行次数记录，出行地点热度记录</p>
							<p>2.略</p>
							<p>3.略</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script>
		$(document).ready(function(){

			$("#menu1").hide();

			$("#menu2").hide();

			var cnt1 = 0;
			$("#aMenu1").click(function(){
				cnt1++;
				if(cnt1 % 2 == 0)
				{
					$(this).css("background-color","#3d3d3d");
					$("#sub1").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-left");
				}
				else
				{
					$(this).css("background-color","#303030");
					$("#sub1").removeClass("glyphicon-menu-left").addClass("glyphicon-menu-down");
				}
				$("#menu1").slideToggle();
			});

			var cnt2 = 0;
			$("#aMenu2").click(function(){
				cnt2++;
				if(cnt2 % 2 == 0)
				{
					$(this).css("background-color","#3d3d3d");
					$("#sub2").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-left");
				}
				else
				{
					$(this).css("background-color","#303030");
					$("#sub2").removeClass("glyphicon-menu-left").addClass("glyphicon-menu-down");
				}
				$("#menu2").slideToggle();
			});
		});
	</script>
</body>
</html>